<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            height: 400px;
            width: 400px;
            position: relative;
            margin: 50px auto;
        }

        #content {
            height: 400px;
            width: 400px;
        }

        #content li {
            height: 400px;
            width: 400px;
            display: none;
        }

        #content li.selected {
            display: block;
        }

        #content li img {
            height: 400px;
            width: 400px;
        }

        #nav {
            position: absolute;
            height: 30px;
            width: 200px;
            background-color: rgba(13, 134, 110, 0.3);
            left: 100px;
            bottom: 50px;
            border-radius: 20px;
        }

        #nav li {
            float: left;
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background-color: #000CCC;
            margin-top: 10px;
            margin-left: 32px;
        }

        #nav li.selected {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div id="box">
    <ul id="content">
        <li class="selected">
            <img src="img/small1.jpg" draggable="false">
        </li>
        <li><img src="img/girlsmall1.jpg" draggable="false"></li>
        <li><img src="img/motoPic1.jpg" draggable="false"></li>
        <li><img src="img/small1.jpg" draggable="false"></li>
    </ul>
    <ul id="nav">
        <li class="selected" data-id="1"></li>
        <li data-id="2"></li>
        <li data-id="3"></li>
        <li data-id="1"></li>
    </ul>
</div>
</body>
<script>
    var index = 0;
    var content = document.getElementById("content");
    var contentList = document.querySelectorAll("#content li");
    var navList = document.querySelectorAll("#nav li");
    var maxIndex = navList.length;

    content.onmousedown = function (e) {
        var evt = window.event || e;
        var startX = evt.clientX;

        content.onmouseup = function (e) {
            var evt = window.event || e;
            var endX = evt.clientX;

            //判断左还是右
            if (endX - startX <= -16) {//往左滑动
                index++;
                if (index == maxIndex) {
                    index = 0;
                }
                //全部消失 再给自己加上
                show();
            } else if (endX - startX >= 16) {
                index--;
                if (index == -1) {
                    index = maxIndex - 1;
                }
                show();
            } else {
                window.location.href = "09detail.html?id=" + navList[index].getAttribute("data-id");

            }

        }

    }

    function show() {
        for (var i = 0; i < contentList.length; i++) {
            contentList[i].className = "";
            navList[i].className = "";
        }
        contentList[index].className = "selected";
        navList[index].className = "selected";
    }

</script>
</html>